<!-- H5不支持省市区，需手动引入 -->
<template>
	<picker
		:class="['z-picker', zClass]"
		:range="rangeView"
		range-key="label"
		:value="valueView"
		mode="multiSelector"
		@change="onChange"
		@columnchange="onColchange"
		@cancel="onCancel"
	>
		<view class="input">
			<view class="left">
				<view v-for="(v, i) in value" :key="i">
					{{rangeInput[i][v].label}}
					<text v-if="i<value.length-1" class="connector">{{connector}}</text>
				</view>
			</view>
			<text class="iconfont">&#xe6f8;</text>
		</view>
	</picker>
</template>

<script>
	export default{
		props: {
			'zClass':{type:String},
			'items':{type:Array},
			'value':{type:null},
			'connector':{type:String}
		},
		data(){
			return{
				// 选择器滚动视图
				rangeView: this.resetCols(this.value),
				valueView: this.value.slice(),
				// 选择框视图
				rangeInput: this.resetCols(this.value)
			}
		},
		methods:{
			onChange(e){
				// 确认选择，采用滚动视图的数据
				this.rangeInput = this.rangeView.slice()
				e.detail.mapValue = e.detail.value.map((v, i)=>this.rangeView[i][v])
				this.$emit('input', e.detail.value)
				this.$emit('change', e)
			},
			// 取消选择，还原到选择框视图的数据
			onCancel(){
				this.rangeView = this.rangeInput.slice()
				this.valueView = this.value.slice()
			},
			// 视图发生滚动，改变列
			onColchange(e){
				this.valueView[e.detail.column] = e.detail.value
				this.rangeView = this.resetCols(this.valueView)
				this.$emit('columnchange', e)
			},
			// 重置列
			resetCols(val){
				let range = []
				let col = this.items.slice()
				let len = val.length
				for(let i=0; i<len; i++){
					range.push(col)
					if(i<len-1)col = col[val[i]].children
				}
				return range
			}
		}
	}
</script>

<style lang="scss">
	.z-picker{
		.input{
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: $form-cell-min-height;
			padding: 15upx 30upx 15upx 0;
		}
		.left{
			display: flex;
		}
		.connector{
			margin: 0 6upx;
		}
	}
</style>
